import React, { useState, useContext } from 'react';
import { Radio } from 'antd';
import { StatusContext } from '@/views/MaterialsView/context';
import BtnGroup from './components/BtnGroup';

interface EditorProps {
  configKey: string;
  id: string;
  status: string[];
  currentStatus: number;
  isShow: boolean;
  editCom: React.FC<any>; // 假设editCom是一个React组件类型
}

const IdalicEditor: React.FC<EditorProps> = ({ configKey, status, currentStatus }) => {
  // const [current, setCurrent] = useState(currentStatus);
  const { updateStatus } = useContext(StatusContext);
  const changeIditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const val = e.target.value;
    const index = status.findIndex(i => i === val);
    if (updateStatus) {
      updateStatus(configKey, index);
    }
  };

  return (
    <BtnGroup title={`${configKey === 'titleItalic' ? '标题' : '描述'}倾斜`} status={status[currentStatus]}>
      <Radio.Group value={status[currentStatus]} onChange={e => changeIditor(e)}>
        {status.map((item, index) => (
          <Radio.Button key={item} value={item}>
            {item}
          </Radio.Button>
        ))}
      </Radio.Group>
    </BtnGroup>
  );
};

export default IdalicEditor;
